<template>
	<view>
		<u-navbar :title="title" :title-size="36"  :title-width="500" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff"  :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" prop="name">
				<u-form-item label="会商名称:" v-if="avatarList.length<=0"><u-input v-model="form.name" type="text" :border="true"/></u-form-item>
				<u-form-item label="参会人员:" style="border-bottom: 0;"><u-icon name="plus" color="#4187f1" size="30" @click="handleAdd" class="addIcon"></u-icon></u-form-item>
				<scroll-view scroll-y="true"  style="height: 900rpx;">
					<div class="tagsBox">
						<div v-for="tag in personList" class="tag" v-if="tag.checked">
							<img src="../../../assets/images/home/avatar.png"/>
							<u-tag :text="tag.name" mode="light"  closeable :disable-transitions="false" @close="tag.checked = !tag.checked"/>
						   </u-tag>
						 </div>
					</div>
				</scroll-view>
				<u-button type="primary" shape="circle" @click="saveUser">提交</u-button>
		    </u-form>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'policeCon',
		// props:['personList'],
		components: {},
		onLoad(option) {
			uni.$on('add',(info)=>{  //开启监听全局的地址改变事件
				this.personList = info.data
		   })
		   if(option.list){
			   this.avatarList =  JSON.parse(decodeURIComponent(option.list))  //详细页里已添加过的人员
			   this.meetId = option.meetId
			   console.log(this.meetId)
		   }
		   
		},
		onUnload(){
		    uni.$off('add')  //在此生命周期里销毁地址改变事件的监听
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				lists:[],
				form:{
					name: '',
				},
				personList:[],
				avatarList: [],
				avList: [],
				title:'创建会商',
				meetId:''
			};
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			userAll(){
				this.$api.reqApi.userListAll().then(res => {
					if(res.code == 200){
						this.personList = res.data
						let arr2Ids = [];
						if (this.avatarList&&this.avatarList.length>0) {  //添加人员
						  this.title = '添加人员'
						  arr2Ids = this.avatarList.map(item => item.id) //将已添加人员渲染出来
						  this.personList.map(item => {
							if (arr2Ids.indexOf(item.id) > -1) {
							  item.checked = true
							} else {
							  item.checked = false
							}
						  })
						  console.log(this.personList)
						}  else {      //创建会商
						  this.personList.map(item => { 
							item.checked = false
						  })
						}
						
					}
				})
			},
			handleAdd(){
				uni.navigateTo({url: '/pages/scheduling/policeConsultation/addUser?list='+ encodeURIComponent(JSON.stringify(this.personList))});
			},			
			saveUser(){
				if(this.form.name==''){
					uni.showToast({
								icon: 'none',
								title: '请填写会商名称'
							})
							return false
				}
				
				var that = this;
				let userIdList = [];
				
				that.personList.map(item => {
				  if (item.checked) {
				    userIdList.push(item.id)
				  }
				})
				if(userIdList&&userIdList.length<=0){
					uni.showToast({
								icon: 'none',
								title: '请选择参会人员'
							})
							return false
				}
				that.form.userIdList = userIdList;
				if (that.avatarList&&that.avatarList.length>0) {  //添加人员
				    that.form.id = that.meetId;
					this.$api.reqApi.editMeetUser(that.form).then(res => {
						if(res.code == 200){
							this.goBack()
						}
					})
				}else{
					this.$api.reqApi.meetEdit(that.form).then(res => {
						if(res.code == 200){
							uni.navigateTo({url: '/pages/scheduling/policeConsultation/policeConsultation'});
						}
					})
				}
				
			}
		},
		mounted() {
			this.userAll()
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	margin: 0 30rpx;
}
uni-page-body{
	background-color: #fff;
}
.tagsBox{
	display: flex;
	flex-flow: wrap;
}
.tag{
	margin-right: 10rpx;
	margin-bottom: 10rpx;
	img{
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
		vertical-align: middle;
	}
	.u-tag{
		background-color:transparent;
		border: 0;
		padding: 12rpx;
		font-size: 30rpx;
		color: #666;
		::v-deep .u-icon__icon{
			background-color: rgb(39, 127, 230);
			padding: 3px;
			border-radius: 40px;
			color: #fff;
		}
	}
}
</style>
